<template>
  <div>
    <div class="fuzhuItem" v-for="(item, index) in sortListWrap" :key="index">
      <div class="title-item">
        {{ item.name }}
      </div>
      <div v-for="(item2, index2) in item.list" :key="index2">
        <div class="result-title">
          <p>检查所见</p>
          <p @click="recordFun(item2)"><span>查看历史记录</span><RightOutlined /></p>
        </div>
        <div class="result-content" v-if="item2 && item2.pe_itm_rslt">
          {{ item2.pe_itm_rslt }}
        </div>
        <a-empty v-else />
        <div class="result-title">检查结论</div>
        <div class="result-content" v-if="item2 && item2.pe_dpt_smry">
          {{ item2.pe_dpt_smry }}
        </div>
        <a-empty v-else />
      </div>
    </div>
    <a-modal width="70%" v-model:open="open" :title="title" @ok="handleOk">
      <a-table
        class="table"
        :columns="columns"
        :dataSource="ListData"
        size="small"
        :pagination="false"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'peItemName'">
            <span class="peItemName">{{ record.peItemName }}</span>
          </template>
        </template>
      </a-table>
      <template v-slot:footer>
        <a-button @click="open = false">关闭</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'
import { RightOutlined } from '@ant-design/icons-vue'
import { getWebRecord } from '@/api/intelligentInspectionReport/index'
const sortListWrap = ref<any>([])
const patInfos = ref<any>({})
const props = defineProps({
  sortList: {
    type: Object, // 或者 Object, 取决于你需要的类型
    required: true
  },
  patInfo: {
    type: Object, // 或者 Object, 取决于你需要的类型
    required: true
  }
})
watch(
  () => props,
  (newValue, oldValue) => {
    nextTick(() => {
      patInfos.value = newValue.patInfo
      sortListWrap.value = newValue.sortList
    })
  },
  {
    immediate: true,
    deep: true
  }
)
const open = ref<boolean>(false)
const title = ref('历史记录')

const columns = ref<any[]>([
  {
    title: '体检时间',
    dataIndex: 'examDt',
    key: 'examDt',
    align: 'left',
    width: 100
  },
  {
    title: '检查项目名称',
    dataIndex: 'peItmNm',
    key: 'peItmNm',
    align: 'left'
  },
  {
    title: '检查所见',
    dataIndex: 'peDptSmry',
    key: 'peDptSmry',
    align: 'left'
  },
  {
    title: '检查结论',
    dataIndex: 'peItmRslt',
    key: 'peItmRslt',
    align: 'left'
  }
])
const ListData = ref<any>([])
const recordFun = (item) => {
  open.value = true
  getWebRecord({
    pid: patInfos.value.empi,
    peItmCd: item.pe_itm_cd
  }).then((res) => {
    if (res.data && res.data.length > 0) {
      ListData.value = res.data
      for (let i = 0; i < res.data.length; i++) {
        ListData.value[i].examDt = timeFilter(res.data[i].examDt, 'date')
      }
    } else {
      ListData.value = []
    }
  })
}
const timeFilter = (date, dateed) => {
  let d = '',
    m = '',
    day = '',
    datetime = '',
    h = '',
    min = '',
    s = ''
  // dateFormat;
  // dateFormat = date.replace(/\-/g, '/')
  // dateFormat = date.replace(/\//g, '-')
  // d = new Date(dateFormat)
  d = new Date(date)
  m = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
  day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
  h = d.getHours() < 10 ? '0' + d.getHours() : d.getHours()
  min = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes()
  s = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds()
  if (dateed == 'date') {
    datetime = d.getFullYear() + '-' + m + '-' + day
    return datetime
  } else if (dateed == 'minutes') {
    datetime = d.getFullYear() + '-' + m + '-' + day + ' ' + h + ':' + min
    return datetime
  } else if (dateed == 'minutesdd') {
    datetime = d.getFullYear() + '/' + m + '/' + day + ' ' + h + ':' + min
    return datetime
  } else if (dateed == 'minutesTwo') {
    datetime = h + ':' + min
    return datetime
  } else {
    datetime = d.getFullYear() + '-' + m + '-' + day + ' ' + h + ':' + min + ':' + s
    return datetime
  }
}
const handleOk = (e: MouseEvent) => {
  open.value = false
}
</script>
<style lang="less" scoped>
.fuzhuItem {
  margin-top: 16px;

  &:nth-child(1) {
    margin-top: 0;
  }
}

.title-item {
  padding: 8px 16px;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 600;
  color: #165dff;
  background: #e8f3ff;
}

.title-item:first-child {
  margin-top: 0;
}

.result-content {
  padding: 12px;
  color: #1d2129;
  white-space: pre-wrap;
  background: #f7f8fa;
}

.result-title {
  display: flex;
  justify-content: space-between;
  margin: 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;

  p {
    margin: 0;
    font-size: 14px;

    &:nth-child(2) {
      color: #165dff;

      &:hover {
        cursor: pointer;
        opacity: 0.8;
      }
    }
  }
}
</style>
